<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="file" id="file-input">

</body>

<script>
    // 监听文件选择事件
    const fileInput = document.getElementById('file-input');
    fileInput.addEventListener('change', handleFileSelect, false);

    // 处理文件选择事件的回调函数
    function handleFileSelect(event) {
        const file = event.target.files[0]; // 获取选择的文件对象

        const reader = new FileReader();
        reader.onload = function (event) {
            const arrayBuffer = event.target.result; // 获取文件内容的 ArrayBuffer
            console.log(arrayBuffer, 'arrayBuffer');
            // 创建 DataView 对象
            const view = new DataView(arrayBuffer);

            // 使用 DataView 方法获取和设置数据
            // const value = view.getUint32(0, true); // 从索引为 0 的位置获取一个小端序的无符号 32 位整数
            const value = view.getInt8(2, false); // 从索引为 0 的位置获取一个大端序的无符号 32 位整数
            // view.setUint16(4, 65535, true); // 将小端序的值 65535 设置到索引为 4 的位置
            console.log(value, "=======value======");

            // // 继续操作其他数据以及后续的逻辑
            // arrayBufferReadText(arrayBuffer)

            
        };

        reader.readAsArrayBuffer(file); // 以 ArrayBuffer 格式读取文件内容
    }

    function arrayBufferReadText(arrayBuffer){
        const textDecode = new TextDecoder('utf-8');
        const contents = textDecode.decode(arrayBuffer)
        console.log(contents, 'content===================');
        return contents
    }
</script>

</html>